<script>
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh
} from 'three'

import Detector from 'three/examples/js/Detector'
export default {
  template: '<div style="width: 100%; height: 100%"></div>',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      cube: null,
      ele: null
    }
  },
  mounted() {
    this.ele = this.$el

    if (Detector.webgl) {
      this.init()
      this.render()
    } else {
      const warning = Detector.getWebGLErrorMessage()
      this.ele.appendChild(warning)
    }
  },
  methods: {
    init() {
      const width = this.ele.clientWidth
      const height = this.ele.clientHeight
      this.scene = new Scene()

      this.camera = new PerspectiveCamera(75, width / height, 0.1, 1000)

      this.renderer = new WebGLRenderer()
      this.renderer.setSize(width, height)
      this.ele.appendChild(this.renderer.domElement)
      this.renderer.setClearColor(0xffffff, 1)

      const geometry = new BoxGeometry(1, 1, 1)
      const material = new MeshBasicMaterial({color: 0xff00ff})
      this.cube = new Mesh(geometry, material)

      this.scene.add(this.cube)

      this.camera.position.z = 5
    },
    render() {
      requestAnimationFrame(this.render)
      this.cube.rotation.x += 0.01
      this.cube.rotation.y += 0.01
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>